import { Directive, HostBinding, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';

@Directive({
  selector: '[appAuth]'
})
export class AuthDirective implements OnChanges {

  permissionsList = [
    { id: 1, code: 'hasPermissionAdd'},
    { id: 4, code: 'hasPermissionView'}
  ];

  @Input() appAuth: string;

  // 第一种方式
  // @HostBinding() innerText = '使用指令appAuth改变了内容。';

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.appAuth) {
      this.permissionsBtn(changes.appAuth.currentValue);
    }
  }

  constructor(
    private el: ElementRef
  ) {
  }

  permissionsBtn(parmas) {
    const index = this.permissionsList.findIndex( (item) => {
      return item.code === this.appAuth;
    });

    if (index === -1) {
      this.el.nativeElement.remove();
    } else {
      this.el.nativeElement.classList.remove('hide');
    }
  }

}
